window.addEventListener('load', function() {
    /* 需求3.如果用户和密码框长度大于1就显示关闭图片,小于就隐藏 */
    let userImg = document.querySelector('.user-name img')
    let userInput = document.querySelector('.user-name input')

    let pwdImg = document.querySelector('.user-pwd img')
    let pwdInput = document.querySelector('.user-pwd input')
    console.log(userImg);
    console.log(pwdImg);
    console.log(userInput);
    console.log(pwdInput);

    userInput.addEventListener('input', function() {
        // trim()清除value的空格后的长度大于0时
        if (userInput.value.trim().length > 0) {
            userImg.style.display = 'block'
        } else {
            userImg.style.display = 'none'
        }
    })

    pwdInput.addEventListener('input', function() {
        // trim()清除value的空格后的长度大于0时
        if (pwdInput.value.trim().length > 0) {
            pwdImg.style.display = 'block'
        } else {
            pwdImg.style.display = 'none'
        }
    })

    /* 需求4.点击关闭图片，input框内容清空,并隐藏自己 */
    userImg.addEventListener('click', function() {
        userImg.style.display = 'none'
        userInput.value = ''
    })

    pwdImg.addEventListener('click', function() {
        pwdImg.style.display = 'none'
        pwdInput.value = ''
    })

    /**
     * 定义正则表达式
     */
    let userReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/

    let pwdReg = /^\d{6}$/

    /* 需求5.不符合正则表达式的就提示 */
    let userTips = document.querySelector('.userTips')
    let pwdTips = document.querySelector('.pwdTips')
    userInput.addEventListener('blur', function() {
        bool = userReg.test(userInput.value)
        if (bool) {
            userTips.textContent = ''
        } else {
            userTips.textContent = '手机号格式错误'
        }
    })
    pwdInput.addEventListener('blur', function() {
        bool = pwdReg.test(pwdInput.value)
        if (bool) {
            pwdTips.textContent = ''
        } else {
            pwdTips.textContent = '密码格式错误'
        }
    })

    /* 需求6.如果用户密码都符号正则,点击登陆按钮跳转 */
    let loginBtn = document.querySelector('.login-btn')

    loginBtn.addEventListener('click', function() {
        if (!userReg.test(userInput.value)) {
            userTips.textContent = '手机号格式错误'
        } else if (!pwdReg.test(pwdInput.value)) {
            pwdTips.textContent = '密码格式错误'
        } else {
            location.href = './home.html'
        }
    })

    /* 需求7.点击扫码登陆切换界面 */
    let topItem = document.querySelector('.top-item')
    let topItem2 = document.querySelector('.top-item2')
    let conItem = document.querySelector('.con-item')
    let wechatCode = document.querySelector('.wechat-code')
        // console.log(topItem);
        // console.log(conItem);
        // console.log(wechatCode);
        // let index = 0
        // topItem.forEach(function(dom, i) {
        //         dom.addEventListener('click', function() {
        //             topItem[index].classList.remove('tab-active')
        //             dom.classList.add('tab-active')

    //             index = i

    //         })
    //     })

    topItem2.addEventListener('click', function() {
        topItem.classList.remove('tab-active')
        topItem2.classList.add('tab-active')
        conItem.style.display = 'none'
        wechatCode.style.display = 'block'
    })
    topItem.addEventListener('click', function() {
        topItem.classList.add('tab-active')
        topItem2.classList.remove('tab-active')
        conItem.style.display = 'block'
        wechatCode.style.display = 'none'
    })
})